import React, { useState } from "react"
import service from "@@/services/user.service"
import { BaseEventOrig, Image, Picker, Text, View } from "@tarojs/components"
import { navigateTo } from "@tarojs/taro"
import NavLayout from "@@/components/layout/nav.layout"
import TInput from "@@/t-ui/input.tui"
import TButton from "@@/t-ui/button.tui"
import TToast from "@@/t-ui/toast.tui"

import "./resetPwd.scss"

let timer;//定时器句柄
const phoneRegexp = /^[0-9]{11,12}$/;

const Index = () => {
    const [mobile, setMobile] = useState<string>("")//手机号
    const [verificationCode, setVerificationCode] = useState<string>("")//验证码
    const [time, setTime] = useState<number>(0)//验证码倒计时
    const [isOpened, setIsOpened] = useState<boolean>(false)//轻提示开关
    const [toastMsg, setToastMsg] = useState<string>("")//轻提示内容

    //发送验证码
    const sendVerificationCode = () => {
        if (TARO_ENV === "h5") {
            if (!phoneRegexp.test(mobile)) {
                openToast("请输入11-12位为数字的手机号")
                return false
            }
            service.sendVerificationCode({ mobile, type: 2 }).then(res => {
                // console.log(res)
                if (res.code === 200) {
                    openToast("发送验证码成功")
                    countDown();
                } else {
                    openToast(res.msg)
                }
            })
        }
    }
    //倒计时方法
    const countDown = () => {
        let num = 60;
        setTime(num)
        const reduce = () => {
            if (num > 0) {
                timer = setTimeout(() => {
                    num -= 1
                    setTime(num)
                    reduce();
                }, 1000)
            } else {
                // console.log(timer)
                clearTimeout(timer)
            }
        }
        reduce()
    }
    const openToast = (str: string) => {
        setToastMsg(str)
        setIsOpened(true)
        setTimeout(() => {
            setIsOpened(false)
        }, 500)
    }
    //下一步
    const nextStep = () => {
        if (TARO_ENV === "h5") {
            if (!verificationCode) {
                openToast("验证码不能为空")
                return false
            }
            service.getSecretKey({ mobile, verificationCode }).then(res => {
                // console.log(res)
                if (res.code === 200) {
                    navigateTo({
                        url: `/pages/modifyPwd/modifyPwd?secretKey=${res.data}`,
                    })
                }
            })
        }
    }

    return (
        <NavLayout border leftIconType="chevron-left" color="#141414" id="LoginPage">
            <View className={'logo_view'}>
                <Image mode={"aspectFit"} src={require('@@/assets/img/login_logo.png')} />
            </View>
            <View className="form">
                <View className={"title"}>重置密码</View>
                <View className="input-item">
                    <TInput
                        border={false}
                        name="phoneNum"
                        type="text"
                        placeholder="手机号"
                        onChange={v => {
                            setMobile(v)
                            return v
                        }}
                    />
                </View>
                <View className="verify-code-box">
                    <View className="input-item verify-code">
                        <TInput
                            border={false}
                            name="verifyCode"
                            type="text"
                            placeholder="验证码"
                            onChange={v => {
                                setVerificationCode(v)
                                return v
                            }}
                        />
                    </View>
                    {
                        time > 0 ? <View className={"send"}>{time}</View> : <View className={"send"} onClick={sendVerificationCode}>发送验证码</View>
                    }
                </View>
            </View>
            <View className="form-btn">
                <TButton type="primary" circle={false} onClick={nextStep}>下一步</TButton>
            </View>
            <TToast isOpened={isOpened} text={toastMsg} />
        </NavLayout>
    )
}

export default Index